import { React, Suspense } from 'react'
import { BrowserRouter, useRoutes, Navigate } from 'react-router-dom';
import { connect } from 'react-redux'
import Myfooter from '../components/myfooter'
import routes from './config'
import '../font/iconfont.css'
const App = (props) => {
    function guardRoutes(routes) {
        const list = [];
        const isLogin = props.token !== '' ? true : false
        routes.forEach(route => {
            const obj = { ...route }
            if (obj.redirect) {
                obj.element = <Navigate to='/login' replace={true} />
            }
            if (!isLogin) {
                if (obj.auth) {
                    obj.element = <Navigate to='/login' replace={true} />
                }
            }
            list.push(obj)
        })
        return list
    }
    const GetRoutes = () => useRoutes(guardRoutes(routes))


    return (
        <BrowserRouter>
            <Myfooter />
            <Suspense fallback={<div>Loading...</div>}>
                <GetRoutes />
            </Suspense></BrowserRouter>
    )
}
export default connect(state => ({
    token: state.user.token || ''
}))(App)

